<template>
    <div class="details">
        <!-- 导航栏 -->
        <Back :sticky="true" :title="'商品详情'" />

        <!-- 商品大图 -->
        <div class="detail-img">
            <img class="auto-img" :src="DetailsData.large_img" alt="" />
        </div>

        <!-- 商品详情 -->
        <div class="pro-info">
            <div class="pro-box">
                <!-- 商品基础信息区 -->
                <div class="pro-box-price-name">
                    <div class="pro-name">{{ DetailsData.name }}</div>
                    <div class="pro-price">￥{{ DetailsData.price }}</div>
                </div>
                <div class="pro-enname">{{ DetailsData.enname }}</div>
                <!-- 商品款式选择区 -->
                <div class="pro-desc-box">
                    <div class="pro-desc" v-for="(v, i) in ChoiceData" :key="i">
                        <div>{{ v.title }}</div>
                        <ul>
                            <li
                                v-for="(item, index) in v.rule"
                                :key="index"
                                :class="{ active: index === v.activeIndex }"
                                @click="active(i, index)"
                            >
                                {{ item.title }}
                            </li>
                        </ul>
                    </div>
                </div>
                <hr />
                <!-- 商品购买数量区 -->
                <div class="pro-quantity">
                    <div>选择数量</div>
                    <div class="pro-quantity-fn">
                        <van-stepper
                            v-model="num"
                            theme="round"
                            button-size="22"
                            disable-input
                        />
                    </div>
                </div>
                <hr />
                <!-- 商品描述文本区 -->
                <div class="pro-describe">
                    <p>商品描述</p>
                    <div class="txt" v-for="(item, index) in desc" :key="index">
                        {{ item }}
                    </div>
                </div>
            </div>
        </div>
        <!-- 购买商品 导航 -->
        <van-goods-action>
            <van-goods-action-icon
                icon="bag"
                text="购物袋"
                color="#646566"
                :badge="bagNum"
                @click="goShopbag"
            />
            <van-goods-action-icon
                icon="like"
                :text="collectionYN ? '已收藏' : '未收藏'"
                :style="{ color: collectionYN ? 'red' : '#646566' }"
                :color="collectionYN ? 'red' : '#646566'"
                @click="collectionFn(pid)"
            />
            <van-goods-action-button
                color="#6a91ec"
                type="warning"
                text="加入购物车"
                @click="addShopcart"
            />
            <van-goods-action-button
                color="#0c34ba"
                type="danger"
                @click="goOrderSettlement"
                text="立即购买"
            />
        </van-goods-action>
    </div>
</template>

<script>
// 导入公共组件
import Back from "../components/Back.vue";

export default {
    name: "Details",

    // 注册子组件
    components: {
        Back,
    },

    data() {
        return {
            //商品的全部详情
            DetailsData: {},
            //商品款式
            choice: ["tem", "sugar", "milk", "cream"],
            //商品款式 数据格式
            ChoiceData: [
                // {
                // title: "糖",
                // activeIndex: 0,
                // rule: [
                // { title: "无糖" },
                // { title: "半份糖" },
                // { title: "三分糖" },
                // ],
                // },
            ],
            //购买的 商品数量
            num: 1,
            //收藏状态
            collectionYN: false,
            //当前商品的id
            pid: "",
            // 购物袋的商品数量
            bagNum: null,

            // 立刻购买的购物袋id
            sid: "",
            // 前往订单开关
            tf: false,
        };
    },
    // 属性计算
    computed: {
        // 拆分 商品描述文本
        desc() {
            if (this.DetailsData.desc) {
                // 

                return this.DetailsData.desc.split("\n");
            }
        },
    },
    methods: {
        //根据pid请求商品数据
        getProductDetailByPid(pid) {
            this.axios({
                method: "get",
                url: "/productDetail",
                params: {
                    pid,
                },
            })
                .then((result) => {
                    // 
                    // 数据赋值
                    this.DetailsData = result.data.result[0];
                    // 

                    // for循环 过滤无用数据
                    for (let i = 0; i < this.choice.length; i++) {
                        // 判断 样式选择是否为 "" 空
                        if (this.DetailsData[this.choice[i]] !== "") {
                            // 声明一个变量 存储 商品选择样式
                            let rule = [];
                            // 判断样式数量
                            if (this.DetailsData[this.choice[i]].indexOf("/") !== -1) {
                                // 有'/', 就拆分存放
                                this.DetailsData[this.choice[i]].split("/").forEach((v) => {
                                    rule.push({ title: v });
                                });
                            } else {
                                // 没有'/', 直接存放
                                rule.push({
                                    title: this.DetailsData[this.choice[i]],
                                });
                            }

                            // 将 商品款式内容 存入 this.ChoiceData 的后面
                            this.ChoiceData.push({
                                title: this.DetailsData[this.choice[i] + "_desc"],
                                activeIndex: 0,
                                rule,
                            });
                        }
                    }
                    //查看 商品款式内容数据 存储情况
                    // console.log(
                    // "🚀 ==> .then ==> this.ChoiceData",
                    // this.ChoiceData
                    // );
                })
                .catch((err) => {

                });
        },

        // 选择 商品款式
        active(i, index) {
            if (index !== this.ChoiceData[i].activeIndex) {
                this.ChoiceData[i].activeIndex = index;
            }
        },

        // 查询 当前商品的收藏状态
        inquiryCollection(pid) {
            this.axios({
                method: "GET",
                url: "/findlike",
                params: { pid, },

            }).then((result) => {
                // 

                // 判断 返回信息中的 收藏状态
                if (result.data.code === 1000) {
                    if (result.data.result.length > 0) {
                        this.collectionYN = true;
                    }
                }

            }).catch((err) => {

            });
        },

        // 收藏功能
        collectionFn(pid) {
            this.axios({
                method: "POST",
                // 判断收藏状态  //true已收藏 就 请求取消, false未收藏 就 请求收藏
                url: this.collectionYN ? "/notlike" : "/like",
                data: { pid, },

            }).then((result) => {

                // 对返回的信息 进行提示
                this.$toast(result.data.msg);

                // 判断 登录状态
                if (result.data.code === 700) {
                    return this.$router.push({ name: "Logon" });
                }

                // 取反 当前商品的收藏状态
                this.collectionYN = !this.collectionYN;
                // 

            }).catch((err) => {

            });
        },

        // 获取 购物袋的商品数量
        getShopcartCount() {
            this.axios({
                method: "GET",
                url: "/shopcartCount",

            }).then((result) => {


                // 获取成功 就存储 购物袋的商品数量
                if (result.data.code === 4000) {
                    this.bagNum = result.data.result;
                }

            }).catch((err) => {

            });
        },

        // 添加到购物袋
        addShopcart() {

            // 整理 rule商品款式
            let rule = [];
            this.ChoiceData.forEach((v) => {
                rule.push(v.rule[v.activeIndex].title)
            })
            rule = rule.join("/");


            // 请求用的 商品数据
            let data = {
                pid: this.pid,
                count: this.num,
                rule,
            }

            // 发送请求
            this.axios({
                method: "POST",
                url: "/addShopcart",
                data,
            }).then((res) => {


                // 判断 登录状态
                if (res.data.code === 700) {
                    return this.$router.push({ name: 'Logon' });
                }

                // 请求成功 添加购物袋商品数量
                if (res.data.code === 3000) {
                    if (this.bagNum === null) {
                        this.bagNum = 0;
                    }
                    this.bagNum += this.num;
                    this.sid = res.data.sid;
                }

                // 修改购物袋的商品数量，再跳转          
                if (this.tf) {

                    this.axios({
                        method: "POST",
                        url: "/modifyShopcartCount",
                        data: {
                            sid: this.sid,
                            count: this.num
                        }
                    }).then((result) => {
                        this.$router.push({ name: 'OrderSettlement', query: { sids: JSON.stringify([this.sid]) } });
                    }).catch((err) => {

                    });
                }

            }).catch((err) => {

            });
        },

        // 跳转到购物袋路由
        goShopbag() {
            this.$router.push({ name: 'Shopbag' });
        },

        // 跳转到订单路由
        goOrderSettlement() {
            this.tf = true;
            this.addShopcart();
        },
    },

    // 初始化钩子 请求商品详情数据
    created() {

        this.pid = this.$route.query.pid;


        this.getProductDetailByPid(this.pid);
        this.inquiryCollection(this.pid);
        this.getShopcartCount();
    },
};
</script>

<style lang="less" scoped>
// 商品大图
.auto-img {
    width: 100%;
    display: block;
}

// 商品详情
.pro-info {
    padding: 10px;
    padding-bottom: 20px;
    background-color: #f7f7f7;

    .pro-box {
        background-color: #fff;
        border-radius: 10px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        padding: 10px 20px;
        transform: translateY(-30px);

        // 商品基础信息区
        .pro-box-price-name {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: 14px;
            font-size: 16px;

            .pro-name {
                font-weight: 600;
                color: #646566;
            }

            .pro-price {
                font-weight: bold;
                color: #0c34ba;
            }
        }

        .pro-enname {
            font-size: 12px;
            margin-top: 6px;
            color: #666;
        }

        // 商品款式选择区
        .pro-desc-box {
            font-size: 14px;
            margin-top: 22px;

            .pro-desc {
                display: flex;

                > div {
                    color: #646566;
                    line-height: 26px;
                    width: 19%;
                }

                ul {
                    display: flex;
                    flex-wrap: wrap;

                    li {
                        width: 60px;
                        height: 26px;
                        font-size: 12px;
                        line-height: 26px;
                        border-radius: 15px;
                        margin-right: 10px;
                        text-align: center;
                        color: #646566;
                        margin-bottom: 10px;
                        background-color: #e8e8e8;
                    }

                    .active {
                        background-color: #0c34ba;
                        color: #fff;
                    }
                }
            }
        }

        hr {
            margin: 10px 0;
            border-top: none;
            border-color: #eaeaea;
        }

        // 商品购买数量区
        .pro-quantity {
            padding: 10px 0;
            font-size: 14px;
            color: #646566;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .pro-quantity-fn {
                display: flex;
                align-items: center;

                /deep/ .van-stepper__minus {
                    color: #e99036;
                    border-color: #e99036;
                }

                /deep/ .van-stepper__plus {
                    color: #fff;
                    background-color: #e99036;
                    border-color: #e99036;
                }

                .ban {
                    color: #dbe1f5;
                    background-color: #fff;
                    border-color: #b8c3eb;
                }

                .pro-quantity-num {
                    width: 20px;
                    text-align: center;
                    margin: 0 10px;
                }
            }
        }

        // 商品描述文本区
        .pro-describe {
            p {
                font-size: 14px;
                color: #646566;
                margin: 22px 0 16px;
            }

            .txt {
                font-size: 12px;
                color: #999;
                margin-bottom: 8px;
            }
        }
    }
}
</style>